<script setup>

import {ref} from "vue";
import router from "@/router/router.js";
import {doGet, doPost} from "@/util/request.js";
import {ElMessage} from "element-plus";

// 对话框显示控制
const centerDialogVisible = ref(true);
//表单对象
const payConfigForm = ref({
  shopName: '',
  userNo: '',
  productName: '',
  productCode: '',
  autoSett: 'yes',
  riskDay: 1,
  ipList: '',
  kqConfig: {
    merchId: '',
    queryKey: '',
    privateFile: '',
    publicFile: '',
    alias: '',
    accessCode: '',
  },
  wxConfig: {
    appId: '',
    merchId: '',
  },
  alipayConfig: {
    appId: '',
    merchId: '',
  }
});
//产品列表对象
let productGridData = ref([])
//商户列表对象
let userGridData = ref([])
//商品列表弹窗
let productDialogVisible = ref(false)

//商户列表弹窗
let userDialogVisible = ref(false)

//商户名称查询按钮
const onQueryUser = () => {
  if (payConfigForm.value.shopName && payConfigForm.value.shopName.length > 1) {
    let params = {
      shopName: payConfigForm.value.shopName
    }
    doGet('/user/shopNameList', params).then((resp) => {
      if (resp && resp.data.code === 200) {
        userGridData.value = resp.data.data
        userDialogVisible.value = true
      }
    })
  } else {
    ElMessage.warning('商户名称至少需要两个字符')
  }
};
//商户名称列表
const selectUser = (row) => {
  payConfigForm.value.userNo = row.userNo
  payConfigForm.value.shopName = row.shopName
  userDialogVisible.value = false
}

//产品名称查询按钮
const onQueryProduct = () => {
  if (payConfigForm.value.productName && payConfigForm.value.productName.length > 1) {
    let params = {
      productName: payConfigForm.value.productName
    }
    doGet('/product/productName', params).then((resp) => {
      if (resp && resp.data.code === 200) {
        productGridData.value = resp.data.data
        productDialogVisible.value = true
      }
    })
  } else {
    ElMessage.warning('产品名称至少需要两个字符')
  }
};
//商品列表
const selectProduct = (row) => {
  payConfigForm.value.productCode = row.productCode
  payConfigForm.value.productName = row.productName
  productDialogVisible.value = false
}

//新增支付配置
const onNewConfig = () => {
  //准备参数
  let data = {
    shopName: payConfigForm.value.shopName,
    userNo: payConfigForm.value.userNo,
    productName: payConfigForm.value.productName,
    productCode: payConfigForm.value.productCode,
    autoSett: payConfigForm.value.autoSett,
    riskDay: payConfigForm.value.riskDay,
    ipList: payConfigForm.value.ipList,
    kqConfig: {
      merchId: payConfigForm.value.kqConfig.merchId,
      queryKey:payConfigForm.value.kqConfig.queryKey,
      privateFile: payConfigForm.value.kqConfig.privateFile,
      publicFile: payConfigForm.value.kqConfig.publicFile,
      alias: payConfigForm.value.kqConfig.alias,
      accessCode:payConfigForm.value.kqConfig.accessCode
    },
    wxConfig: {
      appId: payConfigForm.value.wxConfig.appId,
      merchId: payConfigForm.value.wxConfig.merchId
    },
    alipayConfig: {
      appId: payConfigForm.value.alipayConfig.appId,
      merchId: payConfigForm.value.alipayConfig.merchId
    }
  }
  doPost('/payConfig/add', data).then(resp => {
    if (resp.data.code === 200) {
      //提示信息
      ElMessage.success('添加支付方式成功')
      //等待600毫秒
      setTimeout(() => {
        //返回上一页
        router.go(-1)
      }, 500)
    } else {
      //提示信息
      ElMessage.error('添加支付方式失败: ' + resp.data.msg)
    }
  })
};
//重置按钮
const onReset = () => {
  payConfigForm.value = {
    shopName: '',
    userNo: '',
    productName: '',
    productCode: '',
    autoSett: 'yes',
    riskDay: 1,
    ipList: '',
    kqConfig: {
      merchId: '',
      queryKey: '',
      privateFile: '',
      publicFile: '',
      alias: '',
      accessCode: ''
    },
    wxConfig: {
      appId: '',
      merchId: ''
    },
    alipayConfig: {
      appId: '',
      merchId: ''
    },
  };
};
</script>

<template>
  <el-dialog
      v-model="centerDialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false" :center="true"
      title="新增支付方式"
      width="800" align-center>
    <el-form :model="payConfigForm" label-width="110px" :inline="false">
      <el-row :gutter="20">
        <el-col :span="10" :offset="0">
          <el-form-item label="商户名称">
            <el-input v-model="payConfigForm.shopName"/>
          </el-form-item>
        </el-col>
        <el-col :span="2" :offset="0">
          <el-button type="success" @click="onQueryUser">查询</el-button>
        </el-col>

        <el-col :span="11" :offset="0">
          <el-form-item label="商户编号">
            <el-input v-model="payConfigForm.userNo"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="10" :offset="0">
          <el-form-item label="产品名称">
            <el-input v-model="payConfigForm.productName"/>
          </el-form-item>
        </el-col>
        <el-col :span="2" :offset="0">
          <el-button type="success" @click="onQueryProduct">查询</el-button>
        </el-col>

        <el-col :span="11" :offset="0">
          <el-form-item label="产品编号">
            <el-input v-model="payConfigForm.productCode"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="11" :offset="0">
          <el-form-item label="自动结算">
            <el-radio-group v-model="payConfigForm.autoSett" class="ml-4">
              <el-radio value="yes" size="default">是</el-radio>
              <el-radio value="no" size="default">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="1" :offset="0"></el-col>
        <el-col :span="11" :offset="0">
          <el-form-item label="续存时长">
            <el-input v-model="payConfigForm.riskDay"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="23" :offset="0">
          <el-form-item label="IP白名单">
            <el-input v-model="payConfigForm.ipList"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="23" :offset="0">
          <el-tabs tab-position="left" style="height: 160px; margin-left: 20px" class="demo-tabs">
            <el-tab-pane label="快钱">
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="快钱商户号">
                    <el-input v-model="payConfigForm.kqConfig.merchId"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12" :offset="0">
                  <el-form-item label="快钱查询密钥">
                    <el-input v-model="payConfigForm.kqConfig.queryKey"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="商户私钥文件">
                    <el-input v-model="payConfigForm.kqConfig.privateFile"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="快钱公钥文件">
                    <el-input v-model="payConfigForm.kqConfig.publicFile"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="私钥别名">
                    <el-input v-model="payConfigForm.kqConfig.alias"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="私钥密码">
                    <el-input v-model="payConfigForm.kqConfig.accessCode"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="微信">
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="AppId">
                    <el-input v-model="payConfigForm.wxConfig.appId"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12" :offset="0">
                  <el-form-item label="MerchId">
                    <el-input v-model="payConfigForm.wxConfig.merchId"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="支付宝">
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="AppId">
                    <el-input v-model="payConfigForm.alipayConfig.appId"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12" :offset="0">
                  <el-form-item label="MerchId">
                    <el-input v-model="payConfigForm.alipayConfig.merchId"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="易宝">易宝配置</el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>

      <div style="margin-left: 505px">
        <el-button @click="router.back()">返回</el-button>
        <el-button type="info" @click="onReset">重置</el-button>
        <el-button type="success" @click="onNewConfig">提交</el-button>
      </div>
    </el-form>
  </el-dialog>

  <!-- 产品列表弹窗 -->
  <el-dialog v-model="productDialogVisible" title="支付产品" style="width: 600px">
    <el-table :data="productGridData" @row-click="selectProduct">
      <el-table-column property="productCode" label="支付产品编码" align="center"/>
      <el-table-column property="productName" label="支付产品名称" align="center"/>
    </el-table>
  </el-dialog>
  <!--商户列表弹窗-->
  <el-dialog v-model="userDialogVisible" top="10vh" title="商户列表" style="width: 600px">
    <el-table :data="userGridData" @row-click="selectUser">
      <el-table-column property="userNo" label="商户编号" align="center"/>
      <el-table-column property="shopName" label="商户名称" align="center"/>
    </el-table>
  </el-dialog>
</template>

<style scoped>
</style>